import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { apiSafe } from "@/lib/api";
import { PartyBadge } from "@/components/party";
import { Badge, Card, KV, SectionHeader, SourceBadge } from "@/components/ui";
import { dateTimeFr } from "@/lib/format";
import { partyVar, partyName } from "@/lib/parties";

export const revalidate = 300;

interface Doc { id: number; party: string; title: string; url: string; type: string; status: string; discoveredAt: string; lastCheckedAt: string | null;
  versions: { id: number; sha256: string; fetchedAt: string; bytes: number; pages: number | null; contentType: string | null; analyzedAt: string | null; diff: { ratio: number; added: string[]; removed: string[]; added_count: number; removed_count: number } | null; current: boolean; archiveUrl: string }[];
  proposals: { id: number; topic: string; topicLabel: string; subtopic: string | null; proposal: string; position: string | null; direction: string | null; magnitude: string | null; page: number | null; quote: string; confidence: number; status: string }[] }

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const d = await apiSafe<Doc>(`/api/documents/${id}`);
  return { title: d ? `${d.title} — ${partyName(d.party)}` : "Document" };
}

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const d = await apiSafe<Doc>(`/api/documents/${id}`);
  if (!d) notFound();
  const cur = d.versions.find((v) => v.current) ?? d.versions[d.versions.length - 1];
  const byTopic: Record<string, Doc["proposals"]> = {};
  d.proposals.filter((p) => p.status === "accepted").forEach((p) => { (byTopic[p.topicLabel] ??= []).push(p); });
  return (
    <div className="space-y-8">
      <div><Link href="/documents" className="text-[12.5px] text-ink-3 hover:text-ink">← Bibliothèque</Link>
        <div className="flex items-center gap-2 mt-3 flex-wrap"><PartyBadge id={d.party} /><Badge>{d.type.replace("_", " ")}</Badge>{cur?.contentType?.includes("pdf") && <Badge>PDF · {cur.pages} pages</Badge>}</div>
        <h1 className="display text-[30px] md:text-[42px] mt-3">{d.title}</h1>
        <div className="mt-2 flex items-center gap-3 flex-wrap text-[13.5px]"><a href={d.url} target="_blank" rel="noopener noreferrer" className="link break-all">{d.url}</a><SourceBadge source={{ name: `Site officiel — ${partyName(d.party)}`, url: d.url, archiveUrl: cur?.archiveUrl, retrievedAt: cur?.fetchedAt, tier: "Officiel (parti)" }} /></div>
      </div>
      <div className="grid lg:grid-cols-[1fr_320px] gap-6 items-start">
        <div className="space-y-6">
          {Object.keys(byTopic).length === 0 ? <Card><div className="text-ink-3 text-[13.5px]">Aucune proposition acceptée n&apos;a été extraite de ce document (page de navigation, contenu non politique, ou analyse en attente).</div></Card> : Object.entries(byTopic).map(([label, ps]) => (
            <section key={label}>
              <SectionHeader title={label} eyebrow={`${ps.length} propositions`} />
              <div className="space-y-2">{ps.map((p) => (
                <Card key={p.id} className="scroll-mt-24" >
                  <div id={`p${p.id}`} className="grid md:grid-cols-[1fr_auto] gap-3">
                    <div><div className="font-medium text-[14.5px]">{p.proposal}</div>{p.position && <div className="text-[13px] text-ink-2 mt-1">{p.position}</div>}{p.magnitude && <div className="num text-[13px] mt-1">{p.magnitude}</div>}
                      <blockquote className="mt-3 italic text-ink-2 text-[13px] border-l-2 pl-3 leading-relaxed" style={{ borderColor: partyVar(d.party) }}>« {p.quote} »</blockquote></div>
                    <div className="text-[12px] text-ink-3 num md:text-right shrink-0">{p.page ? <div>Page {p.page}</div> : null}<div>Confiance {Math.round(p.confidence * 100)} %</div>{p.direction && p.direction !== "neutre" && <div className="mt-1"><Badge>{p.direction.replace(/_/g, " ")}</Badge></div>}{p.subtopic && <div className="mt-1">{p.subtopic}</div>}</div>
                  </div>
                </Card>))}</div>
            </section>
          ))}
        </div>
        <div className="space-y-4">
          <Card><div className="eyebrow mb-2">Fiche</div><KV items={[["Parti", partyName(d.party)], ["Type", d.type], ["Découvert", dateTimeFr(d.discoveredAt)], ["Vérifié", dateTimeFr(d.lastCheckedAt)], ["Versions", String(d.versions.length)], ["Propositions", String(d.proposals.filter((p) => p.status === "accepted").length)], ["En révision", String(d.proposals.filter((p) => p.status === "review").length)]]} /></Card>
          <Card><div className="eyebrow mb-2">Versions</div><ul className="space-y-3 text-[12.5px]">{d.versions.slice().reverse().map((v) => (<li key={v.id} className="border-l-2 pl-3" style={{ borderColor: v.current ? partyVar(d.party) : "var(--border)" }}><div className="flex justify-between"><b>{dateTimeFr(v.fetchedAt)}</b>{v.current && <Badge tone="accent">courante</Badge>}</div><div className="mono text-[11px] text-ink-3 break-all mt-0.5">{v.sha256}</div><div className="text-ink-2 mt-0.5 num">{(v.bytes / 1024).toFixed(0)} Ko{v.pages ? ` · ${v.pages} p.` : ""} · <a href={v.archiveUrl} className="link" target="_blank" rel="noopener noreferrer">archive QC26</a></div>{v.diff && <div className="mt-1 text-ink-2">Δ vs version précédente : similarité {Math.round(v.diff.ratio * 100)} %, +{v.diff.added_count} / −{v.diff.removed_count} lignes</div>}</li>))}</ul></Card>
          {cur?.diff && (cur.diff.added.length > 0 || cur.diff.removed.length > 0) && (
            <Card><div className="eyebrow mb-2">Document diff</div><div className="text-[12px] space-y-1 max-h-[360px] overflow-auto">{cur.diff.added.slice(0, 30).map((l, i) => <div key={`a${i}`} className="bg-[rgba(21,128,61,.08)] text-ok rounded px-1.5 py-0.5">+ {l}</div>)}{cur.diff.removed.slice(0, 30).map((l, i) => <div key={`r${i}`} className="bg-[rgba(220,38,38,.07)] text-live rounded px-1.5 py-0.5 line-through">− {l}</div>)}</div></Card>
          )}
        </div>
      </div>
    </div>
  );
}